// Place all the styles related to the Projects controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// The progress bar is displayed in the header navbar. Thus, the
// progress bar styling is defined in the _header file.

@import "variables";

// We use "word-wrap: break-word;" to be compatible with IE and Edge,
// even though word-wrap was renamed to overflow-wrap in CSS3. See:
// https://makandracards.com/makandra/47957-html-making-browsers-wrap-long-words
td.website {
  word-wrap: break-word;
  max-width: 150px;
}
td.license {
  word-wrap: break-word;
  max-width: 150px;
}
td.project_name {
  word-wrap: break-word;
}

.criteria-desc {
}

.criteria-radio {
  margin-top: -10px;
  padding-left: 20px;
}

.criteria-radio label {
  font-family: Arial;
  font-size: 1em;
  font-weight: normal;
  white-space: nowrap;
}

.justification-markdown {
  background-color: #eeeeee;
  p {
    padding-left: 5px;
  }
  blockquote {
    padding: 5px 5px;
    font-size: 13px;
    margin: 0 0 10px;
  }
}

.discussion-markdown {
  background-color: #eeeeee;
  p {
    padding-left: 5px;
  }
}

.badge-progress {
  min-width: 5em;
}

// Project badge logo (shown on show/edit/delete pages)
.main-badge-ques {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 140px;
  height: 140px;
  background: image-url('openssf_bestpracticesbadge.svg') no-repeat top left;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .main-badge-ques {
    background: image-url('openssf_bestpracticesbadge.svg') no-repeat top left;
    background-size: 140px 140px;
  }
}

@media only screen and (max-width: $screen-xs-max) {
  .main-badge-ques {
    position: relative;
    top: 20px;
    margin-top: 0px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    background: image-url('openssf_bestpracticesbadge.svg') no-repeat top left;
    background-size: 80px 80px;
  }
}

// Button styles for project page controls
.btn-simple {
  border: thin solid #ccc;
  background-color: white;
  border-radius: 0;
  padding: 2px 8px;
  font-size: 11px;
}

.btn-xs {
  margin-top: 2px;
  margin-right: 1px;
}

@media only screen and (max-width: 480px) {
  .btn-stack {
    display: block;
    float: none;
    width: 100%;
  }
}

// Submit button styling
.btn-submit {
  width: 40%
}

// Subtext styling for project forms
.main-subtext {
  padding-top: 15px;
}

// Progress bar wrapper (Bootstrap provides the styling)
.progress {
}

// Progress bar subtext
.progress-subtext {
  color: #999;
  font-size: 1.2em;
  text-transform: capitalize;
}
